
<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/">
    <!-- Meta, title, CSS, favicons, etc.-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Theme colour (PWA)-->
    <meta name="theme-color" content="#0c2f54">
    <title>3D Repo | Online BIM collaboration platform</title>
    <!-- Manifest file (PWA)-->
    <link rel="manifest" href="/manifest.json">

    <!-- Styling used in the Angular Material demos-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

  </head>
  <body class="threeDRepo">

    <!-- Inline CSS if CSS fails, also faster-->
    <style>

      body .notSupported {
      	max-width: 100%;
      	max-height: 100%;
      	overflow: hidden;
      	position: absolute;
      	background: #0c2f54;
      	color: white;
      	left: 0;
      	right: 0;
      	width: 100%;
      	height: 100%;
      	text-align: center;
      	z-index: 10;
      	font-size: 20px;
      }

      body .notSupported a {
      	color: #289874;
      }

      body .notSupported img {
      	margin: 4%;
      	width: 90%;
      	max-width: 500px;
      }

      body .notSupported div {
      	margin: 4%;
      	text-align: center;
      }

    </style>

    <noscript>
      <div class="notSupported" aria-label="Not Supported">
        <div><img src="images/3drepo-logo-white.png" longdesc="3DRepoBuildingInformationModellingSoftware" alt="3D Repo"></div>
        <div>JavaScript is currently disabled, this site requires JavaScript to run!</div>
      </div>
    </noscript>

    <div class="notSupported" style="visibility:hidden;" aria-label="Not Supported">
      
      <div><img id="notSupportedLogo" src="images/3drepo-logo-white.png" longdesc="3DRepoBuildingInformationModellingSoftware" alt="3D Repo"></div>
      
      <div>
        Your browser is not supported.
        Please upgrade to the latest version of
        <a id="notSupportedChrome" href="https://www.google.co.uk/chrome" rel="noopener" target="_blank">Chrome</a> or
        <a id="notSupportedFirefox" href="https://www.mozilla.org/firefox" rel="noopener" target="_blank">FireFox</a>
        <br><br><br>

        <input id="notSupportedButton" type="button" value="OK" style="padding:10px 60px; font-size:14px;" onclick="document.getElementById(&quot;notSupported&quot;).style.visibility=&quot;hidden&quot;">
      </div>
    </div>

    <div id="maintenanceMode" style='height: 100%; display: none; background-color:rgb(12,47,84); color: white; overflow-y: hidden;'>
      <div style='width:100%; height:100%; margin: 0; text-align: center;'>
        <img style="margin: 10vh;" src="images/3drepo-logo-white.png" longdesc="3DRepoBuildingInformationModellingSoftware" alt="3D Repo">
        <table style="margin: 0 auto;  margin-top: 5vh; text-align: center;">
          <tr>
            <td style='padding:60px'>
              <img src="images/maintenance.svg" longdesc="maintenanceMode" alt="Hammer and Wrench">
            </td>

            <td style='padding: 30px; width: 50vw; font-family: Roboto; font-size: 40px;'>
              <h4 style="font-weight: lighter;">
                Apologies, but the site is currently down for maintenance. We'll be back up as soon as possible.
              </h4>
            </td>

            <td style='padding:60px'>
              <img src="images/maintenance.svg" longdesc="maintenanceMode" alt="Hammer and Wrench">
            </td>
          </tr>
          </table>
      </div>
    </div>

    <!-- Handle Internet Explorer -->
    <script>

      if (window && window.navigator && window.navigator.userAgent) {

        var ua = window.navigator.userAgent;
        var ie = false;

        var msie = ua.indexOf('MSIE ');
        if (msie > 0) {
            // IE 10 or older => return version number
            ie = true;
        }

        var trident = ua.indexOf('Trident/');
        if (trident > 0) {
            // IE 11 => return version number
            ie = true;
        }

        if (ie === true) {
          document.querySelector('.notSupported').style.visibility='visible';
          document.querySelector('.notSupportedButton').style.display = 'visible';
        }

      }

    </script>



    <!-- Entry point for all components-->
    <div ui-view="main" flex layout="column"></div>
    <app />

    <!-- CSS AND JAVASCRIPT -->

    <!-- Load config from server and dependencies + 3D Repo JavaScript-->
    <script src="/config/config.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded" async></script>

    <!-- Load LiveReload if on Dev-->
    <script>
      if (window) {

        if (window.ClientConfig && window.ClientConfig.development === true) {
          console.debug("Development Environment");
          console.debug("Development - Loading livereload.js");
          var src = "//localhost:35729/livereload.js";
          var script = document.createElement("script");
          script.setAttribute("src", src);
          document.head.appendChild(script);
        }
      }
    </script>
  </body>
</html>
